{% extends "base.html" %}

{% block subtitle %}
  Gallery
{% endblock subtitle %}

{% block content %}
  <div ng-controller="Gallery">

    <div class="oppia-content">
      <div class="oppia-gallery-frame">

        <h3 class="oppia-page-title">
          Gallery
        </h3>

        <div class="oppia-gallery" ng-if="categories">
          <div class="tabbable tabs-left">

            <div class="oppia-gallery-menu">
              <div class="oppia-gallery-menu-title">
                <strong>Categories</strong>
              </div>
              <ul class="nav nav-pills nav-stacked" id="navTabs">
                <li ng-repeat="(category, explorations) in categories"
                    ng-class="{active: $index == 0}">
                  <a data-toggle="tab" href="#<[category|spacesToUnderscores]>">
                    <[category]>
                  </a>
                </li>
              </ul>
            </div>

            <div class="tab-content oppia-gallery-tiles-container">
              <div ng-repeat="(category, explorations) in categories" class="tab-pane" ng-class="{active: $index == 0}" id="<[category|spacesToUnderscores]>">
                <div class="container-fluid">
                  <div class="row-fluid">

                    <div ng-repeat="exploration in explorations | filter: canViewExploration" class="oppia-gallery-tile">

                      <div class="oppia-gallery-tile-top">
                        <a href="/learn/<[exploration.id]>" class="oppia-gallery-tile-anchor">
                          <div class="oppia-gallery-tile-description">
                            <span class="oppia-gallery-tile-title"><[exploration.title]></span>
                            <span class="oppia-gallery-tile-play">
                              <i class="icon-play-circle"></i>
                            </span>
                          </div>
                        </a>
                      </div>

                      <div class="oppia-gallery-tile-bottom">
                        <div>
                          <span ng-if="exploration.can_fork">
                            <a href="" ng-click="forkExploration(exploration.id)">
                              <i class="icon-share oppia-icon" title="Copy this exploration">
                              </i>
                              <span class="oppia-small-font">Copy</span>
                            </a> |
                          </span>
                          <span ng-if="exploration.can_edit">
                            <a href="/create/<[exploration.id]>">
                              <i class="icon-pencil" title="Edit this exploration"></i>
                              <span class="oppia-small-font">Edit</span>
                            </a> |
                          </span>
                          <a href="" ng-click="showEmbedModal(exploration.id)">
                            <i class="icon-share-alt" title="Embed this exploration"></i>
                            <span class="oppia-small-font">Embed</span>
                          </a>
                        </div>
                      </div>

                    </div>

                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <br>
        <br>

        {% if user %}
          <p ng-controller="CreateExplorationModal">
            {% include 'modals/create_exploration_modal.html' %}
            <a class="btn btn-large" ng-click="showCreateExplorationModal(categoryList)">
              Create New Exploration
            </a>
          </p>
        {% else %}
          <h4>
            To create new explorations or edit existing ones, you must <a href="{{login_url}}">log in</a>.
          </h4>
        {% endif %}

      </div>
    </div>
  </div>

  <script type="text/ng-template" id="modals/galleryEmbed">
    <div class="modal-header">
      <h3>Embed this exploration</h3>
    </div>

    <div class="modal-body">
      <p>
        You can embed this exploration in a webpage by copying and pasting
        the following code snippet into the webpage's HTML:
      </p>
      <code>
        &lt;iframe src="<[root]>/learn/<[currentId]>?iframed=true" width="100%"
        <br>
        height="400px" frameborder="0"&gt;&lt;/iframe&gt;
      </code>

      <br>

      <p ng-if="isDemoServer">
        <strong style="color: red">Warning</strong>: This version of Oppia runs on a demo server that may go down at any time. If you want to link to Oppia explorations from a different webpage, we strongly suggest that you <a href="https://code.google.com/p/oppia/wiki/GettingStarted">set up your own server</a>. If you have permission to edit this exploration, you can also download it from this server by clicking the download icon in the top-right of the exploration editor page, and then upload that file to your own server.
      </p>
    </div>

    <div class="modal-footer">
      <button class="btn" ng-click="cancel()">Close</button>
    </div>
  </script>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('gallery/Gallery.js') }}
    {{ include_js_file('modals/createExplorationModal.js') }}
  </script>
{% endblock footer_js %}
